<template>
  <view elevation="5px" class="console-top-statistics-box">
    <view v-if="title" class="statistics-title">
      <text>{{ title }}</text>
    </view>
    <view class="statistics-body">
      <view v-for="(item, index) in data" :key="index" class="statistics-item" @click="handleClick(item)">
        <view class="statistics-value">
          <text>{{ item.value }}</text>
        </view>
        <view class="statistics-label">
          <text>{{ item.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default() {
        return "";
      }
    },
    data: {
      type: Array,
      default() {
        return [
          {
            label: "新增会员",
            value: 20
          },
          {
            label: "订单数",
            value: 20
          },
          {
            label: "单笔均价",
            value: 20
          }
        ];
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    handleClick(item) {
      if (item.fun && typeof item.fun == "function") item.fun();
    }
  }
};
</script>

<style scoped lang="scss">
.console-top-statistics-box {
  .statistics-body {
    display: flex;
    justify-content: space-between;
    padding: 36rpx 0;
    background-color: #ffffff;
    overflow: hidden;
    border-radius: $uni-border-radius-lg;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .statistics-item {
      flex-grow: 1;
      border-right: 1px solid #efefef;
      display: flex;
      flex-direction: column;
      align-items: center;
      &:last-child {
        border-right: 0;
      }
      .statistics-value {
        font-size: $data-box-value-font-size;
      }
      .statistics-label {
        font-size: $data-box-label-font-size;
        color: $uni-text-color-grey;
      }
    }
  }
}
</style>
